<template>
  <div class="list_nav">
  	<ul>
  		<li v-for="item in navData">
	  		<router-link :to="'/category/'+item.id">
	  			<div>
	  				<h2 v-text="item.title"></h2>
	  				<p v-text="item.subTitle"></p>
	  			</div><img :src="item.imgUrl">
	  			<span></span>
	  		</router-link>
  		</li>
  	</ul>
  	<list-pro></list-pro>
  </div>
</template>

<script>

  import ListPro from './product_girl'
  export default{
  	data () {
  		return {
  			navData:[]
  		}
  	},
  	created () {
  		this.$http.get('../../static/list/list-girl.json').then(data => {
  			this.navData = data.data.data.categoryList;
  		}, err => {
  			console.log(err);
  		})

  	},
  	components: {
  		ListPro
  	}
  }

</script>

<style scoped>
.list_nav{
	width: 100%;
	background-color: #F7F7F7;
}
.list_nav ul{
	width: 100%;
	margin-bottom:10px;
	background-color: #FFF;
}
.list_nav ul li{
	width: 50%;
  border-bottom: solid 1px #ddd;
  position: relative;
  float: left;
}
.list_nav ul li span{
	content: "";
	width: 1px;
  height: 100%;
  background: #ddd;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
}
.list_nav ul li div{
	width: 7.5rem;
	height: 4.17rem;
  padding: 10px 0 10px 10px;
  display: inline-block;
}
.list_nav ul li div h2{
	color: #666;
    font-size: 1.35rem;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.list_nav ul li div p{
	padding-top: 8px;
	font-size: 1.1rem;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #d9d9d9;
}
.list_nav ul li img{
	width: 4.17rem;
	height: 4.17rem;
	margin-top:10px;
	vertical-align: top;
}
.list_nav ul:after{
	clear: both;
    content: '';
    font-size: 0;
    display: block;
    visibility: hidden;
    height: 0;
}

</style>
